<template>
  <common-view class="second-page">
    <design-view>
      <img src="../assets/img/second/title.png" alt="" class="title"/>
      <swiper-container :autoplay="true" :lists="hots" @lock="onLock"/>
      <div class="btn animate__animated animate__headShake animate__infinite" @click="onClick">写故事赢好礼</div>
    </design-view>
  </common-view>
</template>

<script>
import SwiperContainer from '@/components/SwiperContainer.vue'
import { mapState } from 'vuex'

export default {
  components: { SwiperContainer },
  name: 'DisplayWorksView',
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['hots'])
  },
  methods: {
    onClick () {
      this.$emit('next-page')
      this.$sound && this.$sound.play()
    },
    onLock (isLock) {
      this.$emit('lock', isLock)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/mixin.scss";
.second-page {
  text-align: center;
  background: url(../assets/img/second/bg.jpg) center center;
  background-size: cover;
  font-size: 0px;
  .title {
    @include wh(525, 110);
    // margin: 76px auto 33px;
    margin: 56px auto 33px;
  }
  .btn {
    @include wh(479, 88);
    background: url(../assets/img/second/btn_bg.png) center no-repeat;
    background-size: 100% 100%;
    // margin:  44px auto 0;
    margin:  34px auto 0;
    font-size: 40px;
    color: white;
    line-height: 88px;
    text-align: center;
  }
}
.small {
  margin: 24px auto 0;
  .title {
    margin:  86px auto 2px;
  }
  .btn {
    margin: 14px auto 0;
  }
}
</style>
